<template>
  <div>
    <!-- 展开 -->
    <div v-if="!close" class="main-area flx-col">
      <div class="bottom-list">
        <div class="list-item flx-col">
          <div class="manage flx-row-bw-c">
            <div class="f-16 f-w-600 ">管理中心</div>
            <div
              style="cursor: pointer"
              class="flx-row-s-c"
              @click="changeClose"
            >
              <div
                :class="
                  colorType == 0
                    ? 'open-icon'
                    : colorType == 1
                    ? 'open-icon-g'
                    : colorType == 2
                    ? 'open-icon-b'
                    : 'open-icon-p'
                "
              ></div>
              <div
                :class="
                  colorType == 0
                    ? 'open-icon'
                    : colorType == 1
                    ? 'open-icon-g'
                    : colorType == 2
                    ? 'open-icon-b'
                    : 'open-icon-p'
                "
              ></div>
            </div>
          </div>
        </div>
        <div
          class="list-item f-w-600 flx-col"
          :class="[item.open ? '' : 'no-open']"
          :style="{
            height: !item.list ? '60px' : 60 * (item.list.length + 1) + 'px',
          }"
          v-for="(item, index) in navList"
          :key="index"
        >
          <div
            v-if="item.to"
            class="main flx-row-bw-c i-0"
            :class="['i-' + index, index == active ? 'active' : '']"
            @click="toPage(item.to)"
          >
            {{ item.name }}
          </div>

          <div
            v-if="!item.to"
            class="main flx-row-bw-c"
            :class="['i-' + index, index == active ? 'active' : '']"
            @click="openNav(index)"
          >
            {{ item.name }}
            <div
              v-if="colorType == 0"
              class="dir-icon"
              :class="{ 'dir-icon-open': item.open }"
            ></div>
            <div
              v-if="colorType == 1"
              class="dir-icon-g"
              :class="{ 'dir-icon-open': item.open }"
            ></div>
            <div
              v-if="colorType == 2"
              class="dir-icon-b"
              :class="{ 'dir-icon-open': item.open }"
            ></div>
            <div
              v-if="colorType == 3"
              class="dir-icon-p"
              :class="{ 'dir-icon-open': item.open }"
            ></div>
          </div>
          <template v-for="(innerItem, innerIndex) in item.list">
            <div
              class="inner-list-item flx-row-s-c"
              :class="{ active: index == active && innerIndex == innerActive }"
              @click="toPage(innerItem.to)"
              :key="innerIndex"
              v-if="!innerItem.other"
            >
              <div class="point"></div>
              <span> {{ innerItem.name }}</span>
            </div>
            <div
              v-else
              :key="innerIndex"
              class="inner-list-item flx-row-s-c"
              @click="goHome(innerItem.to)"
            >
              <div class="point"></div>
              <span> {{ innerItem.name }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 收起 -->
    <div v-if="close" class="close-main-area flx-col">
      <div class="bottom-list">
        <div class="list-item flx-col">
          <div class="manage flx-row-c-c">
            <div
              style="cursor: pointer"
              class="flx-row-s-c"
              @click="changeClose"
            >
              <div
                :class="
                  colorType == 0
                    ? 'open-icon'
                    : colorType == 1
                    ? 'open-icon-g'
                    : colorType == 2
                    ? 'open-icon-b'
                    : 'open-icon-p'
                "
              ></div>
              <div
                :class="
                  colorType == 0
                    ? 'open-icon'
                    : colorType == 1
                    ? 'open-icon-g'
                    : colorType == 2
                    ? 'open-icon-b'
                    : 'open-icon-p'
                "
              ></div>
            </div>
          </div>
        </div>

        <div
          class="list-item flx-col"
          v-for="(item, index) in navList"
          :key="index"
        >
          <div
            v-if="colorType == 0"
            class="main i-0"
            :class="['i-' + index, index == active ? 'active' : '']"
            @click="colseToPage(item, index)"
          ></div>

          <div
            v-if="colorType == 1"
            class="main i-0-g"
            :class="['i-' + index + '-g', index == active ? 'active' : '']"
            @click="toPage(item.to)"
          ></div>

          <div
            v-if="colorType == 2"
            class="main i-0-b"
            :class="['i-' + index + '-b', index == active ? 'active' : '']"
            @click="toPage(item.to)"
          ></div>

          <div
            v-if="colorType == 3"
            class="main i-0-p"
            :class="['i-' + index + '-p', index == active ? 'active' : '']"
            @click="toPage(item.to)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { changelocation } from "@/utils/location.js";
import { mapGetters } from "vuex";
export default {
  name: "VipLeftnavigator",
  data() {
    return {
      navList: [
        {
          name: "控制台",
          to: "/user",
        },
        {
          name: "域名管理",
          open: false,
          list: [
            {
              name: "我的域名",
              to: "/user/mydn",
            },
            {
              name: "我的模板",
              to: "/user/template",
            },
            {
              name: "域名转出",
              to: "/user/transferout",
            },
            {
              name: "域名转入",
              to: "/user/transferin",
            },
            {
              name: "域名PUSH",
              to: "/user/dnpush",
            },
            {
              name: "域名订单",
              to: "/user/myorder",
            },
            {
              name: "批量解析",
              to: "/user/batchanalysis",
            },
            {
              name: "DNS设置",
              to: "/user/batchDns",
            },
          ],
        },
        {
          name: "域名预订",
          open: false,
          list: [
            {
              name: "预订域名",
              to: "/booking",
              other: true,
            },
            {
              name: "批量预订",
              to: "/batchbooking",
              other: true,
            },
            {
              name: "我的预订",
              to: "/user/mybookings",
            },
            /*{
              name: "预订提醒",
              to: "/user/reminder",
            },*/
          ],
        },
        {
          name: "域名竞价",
          open: false,
          list: [
            {
              name: "竞价域名",
              to: "/bidding",
              other: true,
            },
            {
              name: "我的竞价",
              to: "/user/mybiddings",
            },
            {
              name: "我的得标",
              to: "/user/mywinnings",
            },
          ],
        },
        {
          name: "我是卖家",
          open: false,
          list: [
            {
              name: "出售域名",
              to: "/user/dnsell",
            },
            {
              name: "释放域名",
              to: "/user/release",
            },
            {
              name: "发布的一口价",
              to: "/user/mybopdn",
            },
            /*{
              name: "我的米店",
              to: "/user/bopsetting",
            },*/
          ],
        },
        {
          name: "我是买家",
          open: false,
          list: [
            {
              name: "购买的一口价",
              to: "/user/successbop",
            },
            {
              name: "我的委托",
              to: "/user/entrust",
            },
          ],
        },
        // {
        //   name: "域名经纪",
        //   open: false,
        //   list: [
        //     {
        //       name: "申请域名经纪",
        //       to: "/dnpa?tab=1",
        //       other: true,
        //     },
        //     {
        //       name: "我的代购记录",
        //       to: "/user/purchasing",
        //     },
        //     {
        //       name: "我的出售记录",
        //       to: "/user/sell",
        //     },
        //   ],
        // },
        {
          name: "财务管理",
          open: false,
          list: [
            {
              name: "账户信息",
              to: "/user/account",
            },
            {
              name: "折扣统计",
              to: "/user/discount",
            },
            {
              name: "资金明细",
              to: "/user/capitaldetails",
            },
            {
              name: "发票管理",
              to: "/user/invoice",
            },
            // {
            //   name: "我的积分",
            //   to: "/user/mypoints",
            // },
          ],
        },
        {
          name: "账户管理",
          open: false,
          list: [
            {
              name: "个人资料",
              to: "/user/personalData",
            },
            {
              name: "安全中心",
              to: "/user/security",
            },
            {
              name: "我的认证",
              to: "/user/certification",
            },
            /*{
              name: "我的申请",
              to: "/user/myapplication",
            },*/
            {
              name: "通知设置",
              to: "/user/noticeSetting",
            },
            {
              name: "站内信",
              to: "/user/mail",
            },
            {
              name: "登录日志",
              to: "/user/securitylog",
            },
          ],
        },
      ],
      color: "",
      color1: "",
      color2: "",
      colorType: 0, // 1:橙色 2:绿色
      active: 1,
      innerActive: 0,
      close: false,
    };
  },
  // props: {
  //   close: {
  //     default: false,
  //   },
  // },
  computed: {
    ...mapGetters(["getLogoLink"]),
    config: {
      get() {
        return this.close;
      },
      set(val) {
        this.$emit("update:close", val);
      },
    },
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = newValue.meta.navIndex;
        this.innerActive = newValue.meta.innerActive;
        this.navList[newValue.meta.navIndex].open = true;
      },
    },
    close(newValue) {
      this.close = newValue;
    },
  },
  created() {
    if (this.$storage.getColor()) {
      this.color = this.$storage.getColor();
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
    // this.color1 = this.hexToRgba(this.color, 0.2)[0];
    // this.color2 = this.hexToRgba(this.color, 0.8)[0];
    // this.changeS();
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.color = data.color;
        this.colorType = data.colorType;
      }
    },
    // 更换颜色
    changeS() {
      document.documentElement.style.setProperty("--textOrange", this.color);
      document.documentElement.style.setProperty("--mainColor", this.color);
      document.documentElement.style.setProperty(
        "--leftNavbgColor",
        this.color1
      );
      document.documentElement.style.setProperty("--hoverMain8", this.color2);
    },
    hexToRgba(hex, ...opacity) {
      const rgbaArry = [];
      opacity.forEach((item) => {
        rgbaArry.push(
          `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${item})`
        );
      });
      return rgbaArry;
    },
    goHome(path) {
      let url = changelocation(path);
      window.open(url);
    },
    openNav(index) {
      if (this.navList[index].open) {
        this.navList[index].open = !this.navList[index].open;
      } else {
        this.navList.map((item, eIndex) => {
          if (eIndex == index) {
            item.open = true;
          } else {
            item.open = false;
          }
        });
      }
    },
    changeClose() {
      this.close = !this.close;
    },
    toPage(to) {
      if (to == this.$route.path) {
        this.$router.go(0);
      } else {
        this.$router.push(to);
      }
    },
    colseToPage(item, index) {
      if (item.to) {
        this.toPage(item.to);
      } else {
        this.changeClose();
        this.openNav(index);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main-area {
  height: 100%;
  width: 201px;
  flex-shrink: 0;
  transition: width 0.3s;
  overflow: hidden;

  .bottom-list {
    background-color: #fff;
    flex: 1 1 0%;
    transition: border-color 0.3s;
    width: 200px;
    flex-shrink: 0;
    .list-item {
      width: 100%;
      transition: height 0.5s;
      overflow: hidden;
      border-top: 1px solid #e4e6fa;
      &:last-child {
        border-bottom: 1px solid #e4e6fa;
      }

      &.no-open {
        height: 60px !important;
      }

      .manage {
        padding-left: 20px;
        padding-right: 18px;
        color: #696969;
        font-size: 14px;
        height: 60px;
        .open-icon {
          @include size(14px, 14px);
          @include bg-setting3("o-down");
          transform: rotate(90deg);
        }
        .open-icon-g {
          @include size(14px, 14px);
          @include bg-setting3("o-down-g");
          transform: rotate(90deg);
        }
        .open-icon-b {
          @include size(14px, 14px);
          @include bg-setting3("o-down-b");
          transform: rotate(90deg);
        }
        .open-icon-p {
          @include size(14px, 14px);
          @include bg-setting3("o-down-p");
          transform: rotate(90deg);
        }
      }

      .main {
        cursor: pointer;
        flex-shrink: 0;
        padding-left: 67px;
        padding-right: 18px;
        //color: #000;
        font-size: 14px;
        height: 60px;

        @include bg-setting(null, 35px 35px, 15px center);

        border-right: transparent solid 2px;
        transition: background-image 0.3s, color 0.3s, background-color 0.3s;

        &.i-0 {
          background-image: url("~_a/images/i0@2x.png");
        }
        &.i-1 {
          background-image: url("~_a/images/i1@2x.png");
        }
        &.i-2 {
          background-image: url("~_a/images/i2@2x.png");
        }
        &.i-3 {
          background-image: url("~_a/images/i3@2x.png");
        }
        &.i-4 {
          background-image: url("~_a/images/i4@2x.png");
        }
        &.i-5 {
          background-image: url("~_a/images/i5@2x.png");
        }
        &.i-6 {
          background-image: url("~_a/images/i6@2x.png");
        }
        &.i-7 {
          background-image: url("~_a/images/i7@2x.png");
        }
        &.i-8 {
          background-image: url("~_a/images/i8@2x.png");
        }

        &.active,
        &:hover {
          background-color: $mainColor;
          color: #fff;

          .dir-icon {
            @include bg-setting("next-down");
          }

          .dir-icon-g {
            @include bg-setting("next-down");
          }

          .dir-icon-b {
            @include bg-setting("next-down");
          }

          .dir-icon-p {
            @include bg-setting("next-down");
          }

          &.i-0 {
            background-image: url("~_a/images/ih0@2x.png");
          }
          &.i-1 {
            background-image: url("~_a/images/ih1@2x.png");
          }
          &.i-2 {
            background-image: url("~_a/images/ih2@2x.png");
          }
          &.i-3 {
            background-image: url("~_a/images/ih3@2x.png");
          }
          &.i-4 {
            background-image: url("~_a/images/ih4@2x.png");
          }
          &.i-5 {
            background-image: url("~_a/images/ih5@2x.png");
          }
          &.i-6 {
            background-image: url("~_a/images/ih6@2x.png");
          }
          &.i-7 {
            background-image: url("~_a/images/ih7@2x.png");
          }
          &.i-8 {
            background-image: url("~_a/images/ih8@2x.png");
          }
        }
        .dir-icon {
          @include size(14px, 14px);
          @include bg-setting3("o-down");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-g {
          @include size(14px, 14px);
          @include bg-setting3("o-down-g");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-b {
          @include size(14px, 14px);
          @include bg-setting3("o-down-b");
          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-p {
          @include size(14px, 14px);
          @include bg-setting3("o-down-p");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-open {
          transform: rotate(0);
        }
      }

      .inner-list-item {
        flex-shrink: 0;
        height: 60px;
        line-height: 60px;
        padding-left: 44px;
        font-size: 14px;
        font-weight: 400;
        color: #000;
        border-top: 1px solid #e4e6fa;
        cursor: pointer;

        .point {
          width: 6px;
          height: 6px;
          border-radius: 1px;
          background: #757587;
          margin-right: 19px;
        }

        &.active {
          color: $textOrange;
          .point {
            background: $mainColor;
          }
        }
        &:hover {
          color: $textOrange;
          background-color: #fff;
          .point {
            background: $mainColor;
          }
        }
      }
    }
  }
}

.close-main-area {
  height: 100%;
  width: 60px;
  flex-shrink: 0;
  transition: width 0.3s;
  overflow: hidden;
  .bottom-list {
    background-color: #fff;
    flex: 1 1 0%;
    transition: border-color 0.3s;
    width: 60px;
    flex-shrink: 0;
    .manage {
      height: 50px;
      .open-icon {
        @include size(14px, 14px);
        @include bg-setting3("o-down");
        transform: rotate(-90deg);
      }
      .open-icon-g {
        @include size(14px, 14px);
        @include bg-setting3("o-down-g");
        transform: rotate(-90deg);
      }
      .open-icon-b {
        @include size(14px, 14px);
        @include bg-setting3("o-down-b");
        transform: rotate(-90deg);
      }
      .open-icon-p {
        @include size(14px, 14px);
        @include bg-setting3("o-down-p");
        transform: rotate(-90deg);
      }
    }

    .list-item {
      width: 100%;
      transition: height 0.5s;
      overflow: hidden;
      border-top: 1px solid #e4e6fa;
      &:last-child {
        border-bottom: 1px solid #e4e6fa;
      }

      &.no-open {
        height: 60px !important;
      }

      .manage {
        padding-left: 20px;
        padding-right: 18px;
        color: #696969;
        font-size: 14px;
        height: 40px;
        .open-icon {
          @include size(14px, 14px);
          @include bg-setting3("o-down");
          transform: rotate(-90deg);
        }
        .open-icon-g {
          @include size(14px, 14px);
          @include bg-setting3("o-down-g");
          transform: rotate(-90deg);
        }
        .open-icon-b {
          @include size(14px, 14px);
          @include bg-setting3("o-down-b");
          transform: rotate(-90deg);
        }
        .open-icon-p {
          @include size(14px, 14px);
          @include bg-setting3("o-down-p");
          transform: rotate(-90deg);
        }
      }

      .main {
        cursor: pointer;
        flex-shrink: 0;
        height: 40px;

        @include bg-setting(null, 35px 35px, center);

        border-right: transparent solid 2px;
        transition: background-image 0.3s, color 0.3s, background-color 0.3s;

        &.i-0,
        &.i-0-g,
        &.i-0-b,
        &.i-0-p {
          background-image: url("~_a/images/i0@2x.png");
        }
        &.i-1,
        &.i-1-g,
        &.i-1-b,
        &.i-1-p {
          background-image: url("~_a/images/i1@2x.png");
        }
        &.i-2,
        &.i-2-g,
        &.i-2-b,
        &.i-2-p {
          background-image: url("~_a/images/i2@2x.png");
        }
        &.i-3,
        &.i-3-g,
        &.i-3-b,
        &.i-3-p {
          background-image: url("~_a/images/i3@2x.png");
        }
        &.i-4,
        &.i-4-g,
        &.i-4-b,
        &.i-4-p {
          background-image: url("~_a/images/i4@2x.png");
        }
        &.i-5,
        &.i-5-g,
        &.i-5-b,
        &.i-5-p {
          background-image: url("~_a/images/i5@2x.png");
        }
        &.i-6,
        &.i-6-g,
        &.i-6-b,
        &.i-6-p {
          background-image: url("~_a/images/i6@2x.png");
        }
        &.i-7,
        &.i-7-g,
        &.i-7-b,
        &.i-7-p {
          background-image: url("~_a/images/i7@2x.png");
        }
        &.i-8,
        &.i-8-g,
        &.i-8-b,
        &.i-8-p {
          background-image: url("~_a/images/i8@2x.png");
        }

        &.active,
        &:hover {
          .dir-icon {
            @include bg-setting("next-down");
          }

          .dir-icon-g {
            @include bg-setting("next-down");
          }

          .dir-icon-b {
            @include bg-setting("next-down");
          }

          .dir-icon-p {
            @include bg-setting("next-down");
          }

          &.i-0 {
            background-image: url("~_a/userImages/ih0@2x.png");
          }
          &.i-1 {
            background-image: url("~_a/userImages/ih1@2x.png");
          }
          &.i-2 {
            background-image: url("~_a/userImages/ih2@2x.png");
          }
          &.i-3 {
            background-image: url("~_a/userImages/ih3@2x.png");
          }
          &.i-4 {
            background-image: url("~_a/userImages/ih4@2x.png");
          }
          &.i-5 {
            background-image: url("~_a/userImages/ih5@2x.png");
          }
          &.i-6 {
            background-image: url("~_a/userImages/ih6@2x.png");
          }
          &.i-7 {
            background-image: url("~_a/userImages/ih7@2x.png");
          }
          &.i-8 {
            background-image: url("~_a/userImages/ih8@2x.png");
          }
          // 绿色
          &.i-0-g {
            background-image: url("~_a/userImages/ih0-g@2x.png");
          }
          &.i-1-g {
            background-image: url("~_a/userImages/ih1-g@2x.png");
          }
          &.i-2-g {
            background-image: url("~_a/userImages/ih2-g@2x.png");
          }
          &.i-3-g {
            background-image: url("~_a/userImages/ih3-g@2x.png");
          }
          &.i-4-g {
            background-image: url("~_a/userImages/ih4-g@2x.png");
          }
          &.i-5-g {
            background-image: url("~_a/userImages/ih5-g@2x.png");
          }
          &.i-6-g {
            background-image: url("~_a/userImages/ih6-g@2x.png");
          }
          &.i-7-g {
            background-image: url("~_a/userImages/ih7-g@2x.png");
          }
          &.i-8-g {
            background-image: url("~_a/userImages/ih8-g@2x.png");
          }

          // 蓝色
          &.i-0-b {
            background-image: url("~_a/userImages/ih0-b@2x.png");
          }
          &.i-1-b {
            background-image: url("~_a/userImages/ih1-b@2x.png");
          }
          &.i-2-b {
            background-image: url("~_a/userImages/ih2-b@2x.png");
          }
          &.i-3-b {
            background-image: url("~_a/userImages/ih3-b@2x.png");
          }
          &.i-4-b {
            background-image: url("~_a/userImages/ih4-b@2x.png");
          }
          &.i-5-b {
            background-image: url("~_a/userImages/ih5-b@2x.png");
          }
          &.i-6-b {
            background-image: url("~_a/userImages/ih6-b@2x.png");
          }
          &.i-7-b {
            background-image: url("~_a/userImages/ih7-b@2x.png");
          }
          &.i-8-b {
            background-image: url("~_a/userImages/ih8-b@2x.png");
          }

          // 紫色
          &.i-0-p {
            background-image: url("~_a/userImages/ih0-p@2x.png");
          }
          &.i-1-p {
            background-image: url("~_a/userImages/ih1-p@2x.png");
          }
          &.i-2-p {
            background-image: url("~_a/userImages/ih2-p@2x.png");
          }
          &.i-3-p {
            background-image: url("~_a/userImages/ih3-p@2x.png");
          }
          &.i-4-p {
            background-image: url("~_a/userImages/ih4-p@2x.png");
          }
          &.i-5-p {
            background-image: url("~_a/userImages/ih5-p@2x.png");
          }
          &.i-6-p {
            background-image: url("~_a/userImages/ih6-p@2x.png");
          }
          &.i-7-p {
            background-image: url("~_a/userImages/ih7-p@2x.png");
          }
          &.i-8-b {
            background-image: url("~_a/userImages/ih8-b@2x.png");
          }
        }
        .dir-icon {
          @include size(14px, 14px);
          @include bg-setting3("o-down");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-g {
          @include size(14px, 14px);
          @include bg-setting3("o-down-g");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-b {
          @include size(14px, 14px);
          @include bg-setting3("o-down-b");
          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-p {
          @include size(14px, 14px);
          @include bg-setting3("o-down-p");

          transform: rotate(-90deg);
          transition: transform 0.3s, background-image 0.3s;
        }
        .dir-icon-open {
          transform: rotate(0);
        }
      }

      .inner-list-item {
        flex-shrink: 0;
        height: 40px;
        line-height: 40px;
        padding-left: 44px;
        font-size: 14px;
        font-weight: 400;
        color: #000;
        border-top: 1px solid #e4e6fa;
        cursor: pointer;

        .point {
          width: 6px;
          height: 6px;
          border-radius: 1px;
          background: #757587;
          margin-right: 19px;
        }

        &.active {
          color: $textOrange;
          .point {
            background: $mainColor;
          }
        }
        &:hover {
          color: $textOrange;
          background-color: #fff;
          .point {
            background: $mainColor;
          }
        }
      }
    }
  }
}
</style>
